<template>
  <div class="app-container">
    <!-- Tab分类 -->
    <el-tabs v-model="queryParams.lotteryType" @tab-click="handleTabClick">
      <el-tab-pane label="组选" name="1"></el-tab-pane>
      <el-tab-pane label="直选" name="2"></el-tab-pane>
      <el-tab-pane label="组六复式" name="3"></el-tab-pane>
    </el-tabs>

    <!-- 搜索框 -->
    <div class="search-container">
      <el-input
        v-model="searchQuery"
        placeholder="请输入票号进行模糊匹配"
        clearable
        style="width: 300px; margin-right: 10px"
        @keyup.enter.native="handleSearch"
      />
       <el-radio-group v-model="queryParams.statusType"  @input="getList" size="small">
      <el-radio-button label="" key=''>全部</el-radio-button>
      <el-radio-button label="1" key='1'>正常</el-radio-button>
      <el-radio-button label="0" key=0>停售</el-radio-button>
     
    </el-radio-group>
    </div>

    <!-- 内容区域 - 可根据需要添加具体内容 -->
    <div class="content-container">
      <!-- Loading效果 -->
      <div v-if="loading" class="loading-wrapper">
        <el-skeleton :rows="5" animated />
      </div>
      
      <!-- 数据内容 -->
      <div v-else>
        <div v-if="filteredTabList.length > 0">
          <el-row :gutter="20">
            <el-col 
              v-for="(item, index) in filteredTabList" 
              :key="item.lotteryNo || index" 
              :xs="24" 
              :sm="12" 
              :md="8" 
              :lg="6" 
              :xl="4"
              class="card-col"
            >
              <el-card shadow="hover" class="lottery-card">
               
                <div class="card-body">
                   <p :class="item.statusType == '1'?'lottery-yes':'lottery-no'">{{ item.lotteryNo }}</p>
                </div>
                <div class="card-footer">
                  <el-button size="mini" icon="el-icon-tickets" circle title="购买记录"></el-button>
                  <el-button type="primary" size="mini" icon="el-icon-key" @click="handleHandle(item)" circle title="是否停售"></el-button>
                  <el-button type="success" size="mini" icon="el-icon-shopping-cart-full" circle title="购买次数"></el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <el-empty description="暂无数据" v-if="filteredTabList.length === 0"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import { getBaseLotteryList,updateBaseLottery } from "@/api/bussiness"

export default {
    name: "Config",
    data () {
        return {
            // 当前激活的tab
            activeTab: "all",
            // 搜索关键词
            searchQuery: "",
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 9999,
                lotteryType: '1',
                statusType:'',
            },
            // 配置列表（示例数据）
            tabList: [],
            // 加载状态
            loading: false,

        }
    },
    computed: {
        // 基于票号的模糊匹配过滤
        filteredTabList() {
            if (!this.searchQuery) {
                return this.tabList;
            }
            const query = this.searchQuery.toLowerCase();
            return this.tabList.filter(item => 
                item.lotteryNo && item.lotteryNo.toLowerCase().includes(query)
            );
        }
    },
    created () {
        this.getList()
    },
    methods: {
        /** 票号状态 */
        handleHandle (row) {
            const isText =  row.statusType == '1' ? '停售' : '售卖' 
            const text = '是否确认操作票号为'+row.lotteryNo + isText+ '状态？'
            console.log(text);
            this.$modal.confirm(text).then(function () {
                row.statusType = row.statusType == '1' ? '0' : '1'
                return updateBaseLottery(row)
            }).then(() => {
                this.getList()
                this.$modal.msgSuccess("操作成功")
            }).catch(() => { })
        },

        //获取参数值
        getList () {
            this.loading = true
            this.searchQuery = ""
            getBaseLotteryList(this.addDateRange(this.queryParams)).then(response => {
                console.log("获取到的参数的值")
                console.log(response)
                this.tabList = response.rows || []
                this.loading = false
            })
        },
        /**
         * 处理tab切换
         */
        handleTabClick (tab) {
            console.log("切换到tab:", tab.name)
            this.searchQuery = ""
            // 在这里可以添加根据tab加载不同数据的逻辑
            this.getList()

        },
        /**
         * 处理搜索
         */
        handleSearch () {
            console.log("搜索关键词:", this.searchQuery)
            // 前端模糊搜索，无需调用接口
        },
        /**
         * 重置搜索
         */
        resetSearch () {
            this.searchQuery = ""
        }
    }
}
</script>

<style lang='scss' scoped>
::v-deep {
  .el-card__body {
    padding: 15px;
  }
}

.search-container {
  margin: 20px 0;
  display: flex;
  align-items: center;
}

.content-container {
  margin-top: 20px;
}

.loading-wrapper {
  padding: 20px 0;
}

.card-col {
  margin-bottom: 20px;
}

.lottery-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .lottery-yes {
    font-size: 18px;
    font-weight: bold;
    color: rgb(103, 194, 58);
    margin: 0;
  }
  
  .lottery-no {
    font-size: 18px;
    font-weight: bold;
    color: rgb(227, 37, 37);
    margin: 0;
  }
  
  .card-body {
    flex: 1;
    margin-bottom: 15px;
    
    .lottery-info {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      font-size: 14px;
      
      i {
        color: #909399;
        margin-right: 5px;
        font-size: 14px;
      }
      
      span {
        color: #606266;
      }
    }
  }
  
  .card-footer {
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid #eee;
    
    .el-button {
      margin: 0 5px;
    }
  }
}

// 响应式布局
@media (max-width: 768px) {
  .search-container {
    flex-direction: column;
    align-items: stretch;
    
    .el-input {
      margin-bottom: 10px;
      width: 100% !important;
    }
    
    .el-button {
      margin-bottom: 10px;
    }
  }
}
</style>